<template>
  <el-button @click="controlVisible = true" size="default" type="primary" style="margin-bottom: 16px;">新增管理员</el-button>
  <AdminControl v-model="controlVisible" />
  <el-table :data="renderList" style="width: 100%">
    <el-table-column label="索引" type="index" width="80" />
    <el-table-column prop="adminname" label="管理员名称" width="180" />
    <el-table-column prop="adminid" label="管理员id" width="180" />
    <el-table-column prop="role" label="管理员角色" width="180">
      <template #default="{ row }">
        <el-tag :type="row.role === 1 ? '' : 'danger'">{{ row.role === 1 ? '管理员' : '超级管理员' }}</el-tag>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:page-size="pageSize" v-model:current-page="currentPage" layout="prev, pager, next" :total="list.length" />
</template>
<script>
import { getAdminListApi } from '@/api/user'
import AdminControl from './AdminControl.vue'
export default {
  name: 'AppAdminList',
  components: {
    AdminControl,
  },
  data () {
    return {
      list: [],
      pageSize: 10,
      currentPage: 1,
      controlVisible: false
    }
  },
  computed: {
    renderList () {
      const start = (this.currentPage - 1) * this.pageSize
      return this.list.slice(start, start + this.pageSize)
    }
  },
  methods: {
    async getListData () {
      try {
        const list = await getAdminListApi()
        this.list = list.reverse()
      } catch (error) {}
    }
  },
  mounted () {
    this.getListData()
  }
}
</script>